<template>
  <div class="inspectionOrder">
    <!-- 首次报关 -->
    <!-- <div class="firstBG">
      <div class="title">
        <div class="title_left"></div>
        <div class="title_right">首次报关</div>
      </div>
      <div class="center">
        <div class="__list">
          <span v-for="(item,index) in list" :key="index" @click="jumpTo(item)">{{ item }}</span>
        </div>
      </div>
    </div> -->
    <!-- 当日查验报关信息 -->
    <div class="todayBG" v-show="!userInfoLoading">
      <div class="title">
        <div class="title_left"></div>
        <div class="title_right">当日查验报关信息</div>
      </div>
       <div class="center">
          <div class="_btns">
            <div :class="newsBSDis?'_btns_list1':'_btns_listD'" @click="newsBS">新注册企业标识</div>
            <div :class="firstBSFlag?'_btns_list2':'_btns_listD'" @click="firstBS">首次报关企业标识</div>
            <div :class="historyBSFlag?'_btns_list3':'_btns_listD'" @click="historyBS">企业历史有高质量查获</div>
          </div>
          <div class="_search">
              <van-search
                v-model="searchValue"
                show-action
                shape="round"
                :clearable="false"
                placeholder="请输入报关单号"
                
                
              >
                <template slot="action">
                  <div @click="onSearch">查询</div>
                </template>
              </van-search>
          </div>
          <div class="_list">
            
            <table class="_list_table"  v-show="!loading">
              <tr>
                <th>报关单号</th>
                <th>高质量查获数(近一年)</th>
                <th>查获率(近三个月)</th>
                <th>查获数(近三个月)</th>
              </tr>
              <template v-if="tableList.length>0">
                 <tr class="_list_info" v-for="item in tableList" :key="item.id">
                  <td @click="toHistory(item)" >
                    <span style="display:flex;align-items:center">
                      <span style="display:flex;align-items:center;width:40px">
                        <img v-if="item.firstFlag==1" src="@/assets/icon/yujing-hongdeng.png" alt="" width="18" height="18">
                        <img v-if="item.newlyRegisterFlag==1" src="@/assets/icon/yujing-huangdeng.png" alt="" width="18" height="18">
                        <img v-if="item.checkDispatchSlipNum>0" src="@/assets/icon/jiejuefangan.png" alt="" width="18" height="18">
                      </span>
                      <span v-if="item.firstFlag==1" style="color:#e74e0c">{{item.entryId}}</span>
                      <span v-else-if="item.newlyRegisterFlag==1" style="color:#ffbf47">{{item.entryId}}</span>
                      <span v-else-if="item.checkDispatchSlipNum>0" style="color:#0d4d8b">{{item.entryId}}</span>
                      <span v-else style="color:#000">{{item.entryId}}</span>
                    </span>
                    </td>
                  <td>{{item.checkDispatchSlipNum!==null?item.checkDispatchSlipNum:'--'}}</td>
                  <td>{{item.seizureRteB!==null?item.seizureRteB+'%':'--'}}</td>
                  <td>{{item.checkNum!==null?item.checkNum:'--'}}</td>
                  <!-- <td style="border:none">
                    <img src="@/assets/icon/icon-test.png" alt="" width="20" height="20">
                  </td> -->
                </tr>
              </template>
              <template v-else>
                <tr>
                  <td colspan="4" style="text-align:center;height:100px;border:1px solid #333;font-size:18px">查无数据</td>
                </tr>
              </template>
            </table>
            <p class="biaoji" v-if="tableList.length>0" ><img src="../../assets/icon/jiejuefangan.png" alt="" width="16" height="16"> 企业历史有高质量查获的报关单，标记为蓝色</p>
            <p class="biaoji" v-if="tableList.length>0" ><img src="../../assets/icon/yujing-hongdeng.png" alt="" width="16" height="16"> 首次报关企业，标记为红色</p>
            <p class="biaoji" v-if="tableList.length>0" ><img src="../../assets/icon/yujing-huangdeng.png" alt="" width="16" height="16"> 三个月内新注册企业(上海关区)，标记为黄色</p>
            <van-loading
              v-show="loading"
              size="40px"
              color="#0d4d8b"
              vertical
            ></van-loading>
          </div>
        </div>
    </div>
     <van-loading
        v-show="userInfoLoading"
        size="40px"
        color="#0d4d8b"
        vertical
      ></van-loading>
  </div>
</template>
<script>



import watermark from '@/utils/watermark'
import {reqFindFirstEntryId,reqFindAllByEntryId,reqUserInfo}from '@/api/index.js'
import {encrypt} from '@/utils/AES.js'
import {setStorageItem,getStorageItem} from '@/utils/localStorage.js'
export default {
  name: 'inspectionOrder',
  
  data() {
    return {
      userInfoLoading:false,
      tableList:[
        
      ],
      searchValue:'',
      loading:false,
      newsBSDis:false,
      firstBSFlag:false,
      historyBSFlag:false
    }
  },

  created(){
    this.getUserInfo()
    // this.getList()
  },
  mounted() {
   
  },
  computed:{
    browser(){
      const u =navigator.userAgent
      return u.indexOf('AppleWebKit') > -1  || u.indexOf('Trident') > -1 ||u.indexOf('Presto') > -1
    },
  },

  methods:{
    // 新注册企业标识
    newsBS(){
      this.searchValue=''
      this.newsBSDis=!this.newsBSDis
      let persionId=this.$store.state.dashboard.customsUserInfo?this.$store.state.dashboard.customsUserInfo.persionId:null
      this.getList(persionId)
    },
    // 首次报关企业标识
    firstBS(){
      this.searchValue=''
      this.firstBSFlag=!this.firstBSFlag
      let persionId=this.$store.state.dashboard.customsUserInfo?this.$store.state.dashboard.customsUserInfo.persionId:null
      this.getList(persionId)
    },
    // 企业历史有高质量查获
    historyBS(){
      this.searchValue=''
       this.historyBSFlag=!this.historyBSFlag
       let persionId=this.$store.state.dashboard.customsUserInfo?this.$store.state.dashboard.customsUserInfo.persionId:null
      this.getList(persionId)
    },
    getParamer(paramer) {
       var url = window.location.href.split("?")[1]
              if(!url) {
                return null
              }
              if (url.indexOf("&") > 0) { 
                 let urlParamArry = url.split("&")
                 console.log(urlParamArry);
                  for (var i = 0; i < urlParamArry.length; i++) {
                    if(paramer=='flagNo'){
                      var paramerName = urlParamArry[0].split('flagNo=')
                       return paramerName[1]; 
                    }else if(paramer=='loginName'){
                       var paramerName = urlParamArry[1].split('loginName=')
                       return paramerName[1]; 
                    }else {
                      return null
                    }
                      // var paramerName = urlParamArry[i].split(a);
                      // if(paramerName){
                      //    return paramerName[1]; 
                      // }
                     
                 }
            } else { 
                 var paramerValue = url.split("=")[1]
                 return paramerValue
             }

    },
    async getUserInfo(){
      this.userInfoLoading=true
      // const obj=this.$route.query
      const flagNo =decodeURIComponent(this.getParamer('flagNo')).replace(/\+/g,'%2B')||null
      const loginName =decodeURIComponent(this.getParamer('loginName')).replace(/\+/g,'%2B')||null
      console.log(flagNo,loginName);
      if(flagNo!=='null'&&flagNo&&loginName&&loginName!=='null'){
        setStorageItem('flagNo_key',flagNo)
        setStorageItem('loginName_key',loginName)
         var url = window.location.href.split("?")[0]
        window.location.href=url
        // const res=await reqUserInfo({
        //     flagNo:flagNo,
        //     loginName:loginName
        //   })
        //   if(res.data.persionId){
        //      this.userInfoLoading=false
        //      this.$store.dispatch('setUserInfo',res.data)
             
        //       this.getList(res.data.persionId)
        //       watermark.set(res.data.persionId);//显示加密水印
        //       // let url=location.href.split('?')[0]
        //       // history.replaceState(null,null,url)
        //   }else {
        //      this.userInfoLoading=false
        //      this.$store.dispatch('dashboard/setUserInfo',null)
        //     this.$notify({ type: 'danger', message: '对不起，您没有访问权限' });
        //     setTimeout(()=>{
        //       this.$router.replace('/404')
        //     },300)
             
        //   }
          
          
      }else {
        let flagNo_key =getStorageItem('flagNo_key')
        let loginName_key=getStorageItem('loginName_key')
        if(flagNo_key&&loginName_key&&flagNo_key!=='null'&&loginName_key!=='null'){
          const res=await reqUserInfo({
            flagNo:flagNo_key,
            loginName:loginName_key
          })
          if(res.data.persionId){
             this.userInfoLoading=false
             this.$store.dispatch('setUserInfo',res.data)
             
              this.getList(res.data.persionId)
              watermark.set(res.data.persionId);//显示加密水印
              // let url=location.href.split('?')[0]
              // history.replaceState(null,null,url)
          }else {
             this.userInfoLoading=false
             this.$store.dispatch('dashboard/setUserInfo',null)
            this.$notify({ type: 'danger', message: '对不起，您没有访问权限' });
            setTimeout(function(){
              this.$router.replace('/404')
            },300)
             
          }
        }else {
           this.$notify({ type: 'danger', message: '对不起，您没有访问权限' });
          this.$router.replace('/404')
        }
       
      }
      
      
    },
    getList(customsOfficerNum){
      this.loading=true
      this.tableList=[]
       reqFindFirstEntryId({
          customsOfficerNum:customsOfficerNum,
          newlyRegisterFlag:this.newsBSDis?'1':null,
          firstFlag:this.firstBSFlag?'1':null,
          checkDispatchSlipFlag:this.historyBSFlag?'1':null
        }).then(res=>{
          this.tableList=res.data
          this.loading=false
        }).catch(err=>{
          this.tableList=[]
          this.loading=false
        })
      
    },
    
    toHistory(val){
      this.$router.push({
        path:'/historicalData',
        query:{
          
          eData:encrypt(JSON.stringify({
              entryId:val.entryId,
            
          }))
          
        }
      })
    },
   async onSearch(){
      
    if(this.searchValue==''||!this.searchValue){
      let persionId=this.$store.state.dashboard.customsUserInfo?this.$store.state.dashboard.customsUserInfo.persionId:null
      this.getList(persionId)
      return
    }
      this.newsBSDis=false
      this.firstBSFlag=false
      this.historyBSFlag=false
     this.loading=true
     this.tableList=[]
       reqFindAllByEntryId({
        customsOfficerNum:this.$store.state.dashboard.customsUserInfo?this.$store.state.dashboard.customsUserInfo.persionId:null,
        entryId:this.searchValue
      }).then(res=>{
       
        this.tableList=res.data
        this.loading=false
      }).catch(err=>{
        this.tableList=[]
        this.loading=false
      })
      
      // console.log(this.searchValue);
    },
  
  }
}
</script>
<style lang="scss" scoped>
$main-color: #1f4382;
$border-color: #104fb8;
.inspectionOrder {
  font-family: AlibabaPuHuiTi_2_45_Light;
  .firstBG {
    .title {
      display: flex;
      align-items: center;
      height: 45px;
      padding: 0 6px;
      background-color: #f2f2f2;
      .title_left {
        width: 5px;
        height: 10px;
        background-color: #0d4d8b;
      }
      .title_right {
        margin-left: 10px;
        font-size: 14px;
        font-weight: 600;
      }
    }
    .center {
      width: 100%;
      // height: 200px;
      background-color: #fff;
      padding: 10px;
      .__list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        span {
          color: #D9001B;
          font-size: 12px;
          margin: 5px 5px;
          cursor: pointer;
        }
      }
    }
  }
  .todayBG {
     .title {
      display: flex;
      align-items: center;
      height: 30px;
      padding: 0 10px;
      background-color: #f2f2f2;
      .title_left {
        width: 5px;
        height: 20px;
        background-color: #0d4d8b;
      }
      .title_right {
        margin-left: 10px;
         font-size: 13px;
        font-weight: 500;
      }
    }
    .center {
      width: 100%;
      // height: 1000px;
      background-color: #fff;
     
      ._btns {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        ._btns_list1 {
           width: 110px;
          text-align: center;
          font-size: 10px;
          color: #fff;
          background-color: #ffbf47;
          height: 25px;
           line-height: 25px;
           border-radius: 2px;
           cursor: pointer;
        }
        ._btns_list2 {
           width: 110px;
          text-align: center;
          font-size: 10px;
          color: #fff;
          background-color: #e74e0c;
          height: 25px;
           line-height: 25px;
           border-radius: 2px;
           cursor: pointer;
        }
        ._btns_list3 {
          width: 110px;
          text-align: center;
          font-size: 10px;
          color: #fff;
          background-color: #0d4d8b;
          height: 25px;
          line-height: 25px;
          border-radius: 2px;
          cursor: pointer;
        }
        ._btns_listD{
          width: 110px;
          text-align: center;
          font-size: 10px;
          color: #fff;
          background-color: #ccc;
          height: 25px;
          line-height: 25px;
          border-radius: 2px;
          cursor: pointer;
        }
      }
      ._search {
        ::v-deep .van-search {
          .van-search__content {
            border-radius: 2px;
          }
          .van-search__action {
            margin: 0 10px 0 10px;
            width: 70px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color:#0d4d8b;
            color:#fff;
            border-radius: 2px;
            font-size: 14px;
          }
        }
      }
      ._list {
        margin-top: 20px;
        width: 100%;
        // height: 300px;
        padding: 0 10px 50px 10px;
        .biaoji{
          margin-top: 15px;
          // color: #D9001B;
          font-size: 10px;
          display: flex;
          align-items: center;
          img {
            margin-right: 5px;
          }
        }
        // border: 1px solid #ccc;
        ._list_table {
           width: 100%;
          //  height: 300px;
           font-family: verdana,arial,sans-serif;
            font-size:11px;
            color:#333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
          th {
             border-width: 1px;
              padding: 12px 8px;
              border-style: solid;
              border-color: #666666;
              background-color: #dedede;
              text-align: center;
            &:nth-child(1){
              width: 55%;
            }
            &:nth-child(2){
              width: 15%;
            }
            &:nth-child(3){
              width: 15%;
            }
            &:nth-child(4){
              width: 15%;
            }
          }
          ._list_info {
              td {
                border-width: 1px;
                padding: 12px 8px;
                border-style: solid;
                border-color: #666666;
                background-color: #ffffff;
                 text-align: center;
                 &:nth-child(1){
                  width: 55%;
                  color: #0000FF;
                  cursor: pointer;
                }
                &:nth-child(2){
                  width: 15%;
                }
                &:nth-child(3){
                  width: 15%;
                }
                &:nth-child(4){
                  width: 15%;
                }
            }
          }
          
        }
      }
    }
  }

}
 
  




</style>
